<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div class="app" v-cloak>
       <h2 ref="testh2" @click="alertH2()" v-once>{{message}}</h2>
       <h3 >{{text}}</h3>
       <div v-html="html"></div>

       <div v-if="isLike">喜欢</div>
       <div v-else>不喜欢</div>


       <p v-show="isShow">显示</p>

       <ul>
         <li v-for="item,index in tabs" :key="index">{{ item.title }}</li>
       </ul>

       <ul>
        <li :key="key" v-for="value, key in item">{{ key }} | {{ value }}</li>
       </ul>

       <a :href=" href ">百度</a>

       <input type="text" placeholder="输入用户名" v-model="user_name">

       {{ user_name }}


       <hr>

       <h1>{{ testsss("张三") }}</h1>


    </div>

   
    
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>

    // data 定义变量的地方 
    // methods 定义方法的地方
    // 指令：vue提供的一些标签属性，可是实现各种功能
    //   v-on  绑定点击事件
    //    简写 @事件类型
    //   v-text
    //   v-html 将html字符串，渲染成真的dom
    //   v-if 根据条件选择显示什么东西
    //   v-show 根据条件选择显示什么东西
    //   v-for 循环显示
    //   v-bind 将变量绑定到标签的属性上
    //     简写 :
    //   v-model 获取输入框的值
    //   TODO activated

    //  computed 会进行结果的缓存

    let vm = new Vue({
        el: ".app",
        data: {
            user_name: '',
            message: "我的vue学习",
            text: "我是v-text",
            html: ` <ul> <li>你好</li> </ul>`,
            isLike: true,
            isShow: true,
            href: 'https://www.baidu.com/',
            tabs: [
                { id: 1, title: '社会' },
                { id: 2, title: '军事' },
                { id: 3, title: '体育' },
            ],
            item:  { id: 1, title: '社会' }
        },

        beforeCreate() {
            console.log(this.message);
        },
        created() {
            // ajax请求
            console.log(this.message);
            console.log(this.$refs.testh2);
        },
        mounted() {
            console.log("mounted: ",this.$refs.testh2);
        },
        updated() {
            console.log("updated: ");
        },
        methods: {
            alertH2() {
                alert(this.message)
                this.alertH2_2()
            },
            alertH2_2() {
                alert("点我了2")
            }
        },
        computed: {
            testsss() {
                return (name) => {
                    console.log(name);
                    return name + this.message
                }
            }
        },
        watch: {
            user_name: {
                handler: (value, oldvalue) => {
                    console.log("watch: ",value, oldvalue);
                },
                immediate: true
            }
          
        }
    })

    console.log(vm);
</script>
</html>